<script setup lang="ts">
// 引入必要的模块和工具函数
import { computed, onMounted, ref, watch } from 'vue';
import { useForm, useFormRules } from '@/hooks/common/form';
import { $t } from '@/locales'; // 国际化翻译函数
import type { ApiUserInput, ApiUserOut, ApiUserRoleInput } from '@/api-services'; // 用户相关的API输入输出类型定义
import { UserApi } from '@/api-services/apis/user-api'; // 用户操作的API服务
import { feature, getAPI } from '@/axios-utils'; // 用于调用API的工具函数
import { queryDone } from '@/utils/api'; // 处理API响应的工具函数
import { REG_PWD, REG_USER_NAME } from '@/constants/reg'; // 正则表达式常量
import { ApiroleserviceApi } from '@/api-services/apis/apiroleservice-api'; // 角色管理的API服务

// 定义组件名称
defineOptions({
  name: 'UserRoleOperate'
});

// 定义组件的props
interface Props {
  rowData?: ApiUserOut | null;
}

const props = defineProps<Props>();

// 定义组件的emits
interface Emits {
  (e: 'submitted'): void;
}

const emit = defineEmits<Emits>();

// 定义visible模型，用于控制抽屉的显示与隐藏
const visible = defineModel<boolean>('visible', {
  default: false
});

// 使用表单钩子函数
const { formRef, validate, restoreValidation } = useForm();
const { defaultRequiredRule } = useFormRules();


// 定义表单模型类型
type Model = {
  [K in keyof Pick<ApiUserRoleInput, 'userId' | 'roleIds'>]: NonNullable<
    ApiUserRoleInput[K]
  >;
};

// 初始化表单模型
const model = ref(createDefaultModel());

// 创建默认的表单模型对象
function createDefaultModel(): Model {
  return {
    userId: 0,
    roleIds: []
  };
}


// 存储角色选项
const roleOptions = ref<CommonType.Option<string>[]>([]);

// 获取角色选项数据
async function getRoleOptions() {
  const [err, res] = await feature(getAPI(ApiroleserviceApi).getAll());

  let roleData: { label: string; value: string }[] = [];
  queryDone(err, async () => {
    if (res?.data.data) {
      roleData = res.data.data.map(it => ({
        label: it.name!,
        value: it.id!.toString()
      }));
    }
  });
  roleOptions.value = [...roleData];
}


// 初始化表单模型
async function handleInitModel() {
  model.value = createDefaultModel();
  //查询当前用户有哪些角色

  if (props.rowData?.id) {
    const userId = props.rowData.id;
    // 提交请求
    const [err, res] = await feature(getAPI(ApiroleserviceApi).getUserRoleIds(props.rowData?.id));
    queryDone(err, async () => {
      if (res?.data.data) {
        model.value.roleIds = res.data.data;
        model.value.userId = userId;
      }
    });
  }

}

// 关闭抽屉的方法
function closeModal() {
  visible.value = false;
}


// 提交表单的方法
async function handleSubmit() {
  await validate(); // 验证表单

  // 提交请求
  const [err, res] = await feature(getAPI(UserApi).updateUserRole(model.value));

  queryDone(err, async () => {
    if (res?.data.data) {
      window.$message?.success($t('common.updateSuccess'));
      closeModal();
      emit('submitted');
    }
  });
}

// 监听visible的变化，初始化表单
watch(visible, () => {
  if (visible.value) {
    handleInitModel();
    restoreValidation();
  }
});

onMounted(() => {

  // 调用获取角色选项的方法
  getRoleOptions();
})
</script>

<template>
  <ElDialog v-model="visible" :title="$t('common.userRole.edit')" width="600" class="h-300px">
    <ElForm ref="formRef" :model="model">
      <!-- 用户名输入框 -->
      <ElFormItem :label="$t('page.manage.user.userName')" name="account">
        {{ rowData?.account }}
      </ElFormItem>
      <!-- 昵称输入框 -->
      <ElFormItem :label="$t('page.manage.user.nickName')" name="nick">
        {{ rowData?.nick }}
      </ElFormItem>


      <!-- 用户角色选择器 -->
      <ElFormItem :label="$t('page.manage.user.userRole')" name="roles">
        <ElSelect v-model="model.roleIds" multiple :placeholder="$t('page.manage.user.form.userRole')">
          <ElOption v-for="item in roleOptions" :key="item.value" :value="item.value" :label="item.label">
          </ElOption>
        </ElSelect>
      </ElFormItem>
    </ElForm>
    <template #footer>
      <ElSpace :size="16">
        <!-- 取消按钮 -->
        <ElButton @click="closeModal">{{ $t('common.cancel') }}</ElButton>
        <!-- 确认按钮 -->
        <ElButton type="primary" @click="handleSubmit">{{ $t('common.confirm') }}</ElButton>
      </ElSpace>
    </template>
  </ElDialog>
</template>

<style scoped></style>
